﻿@{
    ViewBag.Title = "Quản lý - Bài viết";
    Layout = "~/Views/Shared/_CpanelLayout.cshtml";
}
<script type="text/javascript">
    $(document).ready(function () {
        $(".active").removeClass("active");
        $("li[rel=rel-article]").parent().parent().css("display", "block");
        $("li[rel=rel-article]").parent().parent().prev().addClass("active");
        $("li[rel=rel-article]").addClass("active");
        $("li[rel=rel-article-all]").addClass("active");
    });
</script>
<script type="text/javascript">
    $(document).ready(function () {

        var url = "/Articles/getArticlesJson";
        var theme = "arctic";

        var getAdapter = function () {
            var source = {
                datatype: "json",
                datafields: [
                                   { name: 'ArticlesID', type: 'int' },
                                   { name: 'Title', type: 'string' },
                                   { name: 'ArticlesCateName', type: 'string' },
                                   { name: 'UserPost', type: 'string' },
                                   { name: 'DatePost', type: 'string' },
                                   { name: 'UserUpdate', type: 'string' },
                                   { name: 'DateUpdate', type: 'string' },
                                   { name: 'Display', type: 'bool' },
                                   { name: 'FlagImage', type: 'string' },
                ],
                id: 'ArticlesID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            return dataAdapter;
        };

        var imagerenderer = function (row, datafield, value) {
            return '<img style="margin:10px;10px;10px;10px;" height="30" width="100" src="/content/upload/images/' + value + '"/>';
        }
        var imagerenderer_company = function (row, datafield, value) {
            return '<img style="margin:10px;10px;10px;10px;" height="50" width="150" src="/content/upload/images/' + value + '"/>';
        }
        var flagimage = function (row, datafield, value) {
            return '<img style="margin-left: 38px;margin-top:23px;width:auto;" height="25" width="40" src="/content/images/' + value + '"/>';
        }
        var getLocalization = getlocalizationobj();
        $("#grid_news").jqxGrid({
            width: '100%',
            source: getAdapter(),
            rowsheight: 70,
            theme: theme,
            autoheight: true,
            pageable: true,
            sortable: true,
            pagesize: 10,
            showfilterrow: true,
            enabletooltips: true,
            autoshowfiltericon: true,
            selectionmode: 'rowsextended',
            filterable: true,
            localization: getLocalization,
            showtoolbar: true,
            altrows: true,
            rendertoolbar: function (toolbar) {
                // appends buttons to the status bar.
                var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Tìm kiếm</span></div>");
                var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Thêm</span></div>");
                var editButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/edit.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Cập nhật</span></div>");
                var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Xóa</span></div>");
                var deletefilterButton = $("<div id='clearfilteringbutton' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/filter_delete.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Bỏ lọc dữ liệu</span></div>");
                var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='/Content/images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Tải lại</span></div>");
                container.append(addButton);
                container.append(editButton);
                container.append(deleteButton);
                container.append(deletefilterButton);
                container.append(reloadButton);
                container.append(searchButton);
                toolbar.append(container);

                addButton.jqxButton({ theme: theme, width: 80, height: 20 });
                editButton.jqxButton({ theme: theme, width: 100, height: 20 });
                deleteButton.jqxButton({ theme: theme, width: 80, height: 20 });
                searchButton.jqxButton({ theme: theme, width: 100, height: 20 });
                reloadButton.jqxButton({ theme: theme, width: 80, height: 20 });
                deletefilterButton.jqxButton({ theme: theme, width: 130, height: 20 });
                // search for a record.
                addButton.click(function (event) {
                    window.location = "/Articles/InsertArticles/"
                });
                searchButton.click(function (event) {
                    var offset = $("#grid_news").offset();
                    $("#jqxwindow").jqxWindow('open');
                    $("#jqxwindow").jqxWindow('move', offset.left + 30, offset.top + 30);
                });
                reloadButton.click(function (event) {
                    $("#grid_news").jqxGrid({ source: getAdapter() });
                });
                // delete selected row.
                deleteButton.click(function (event) {
                    var selectedrowindex = $("#grid_news").jqxGrid('getselectedrowindex');
                    var rowscount = $("#grid_news").jqxGrid('getdatainformation').rowscount;
                    var id = $("#grid_news").jqxGrid('getrowid', selectedrowindex);
                    if (selectedrowindex >= 0) {
                        var comfim = confirm("Bạn có thật sự muốn xóa?");
                        if (comfim) {
                            var dataRecord = $("#grid_news").jqxGrid('getrowdata', selectedrowindex);
                            $.ajax({
                                type: "POST",
                                url: "/Articles/DeleteArticles",
                                datatype: "Json",
                                data: { ArticlesID: dataRecord.ArticlesID },
                                success: function (result) {
                                    if (result["Status"] == "OK") {
                                        alert("Xóa thành công");
                                        $("#grid_news").jqxGrid('deleterow', id);
                                    }
                                    else {

                                        alert("Xóa thất bại");
                                    }
                                }
                            });
                        }

                    }
                    else {
                        alert("Chọn dữ liệu cần xóa.");
                    }
                });
                editButton.click(function (event) {
                    var selectedrowindex = $("#grid_news").jqxGrid('getselectedrowindex');
                    var rowscount = $("#grid_news").jqxGrid('getdatainformation').rowscount;
                    var id = $("#grid_news").jqxGrid('getrowid', selectedrowindex);
                    var dataRecord = $("#grid_news").jqxGrid('getrowdata', selectedrowindex);
                    if (selectedrowindex >= 0) {
                        location = "/Articles/UpdateArticles/" + dataRecord.ArticlesID;
                    }
                    else {
                        alert("Chọn dữ liệu cần sửa.");
                    }
                });
            },
            columns: [
            { text: 'ID', datafield: 'ArticlesID', filtertype: 'number', width: 55 },
            { text: 'Ngôn ngữ', datafield: 'FlagImage', sortable: false, filterable: false, width: 100, height: 45, cellsrenderer: flagimage },
            { text: 'Loại bài viết', datafield: 'ArticlesCateName', filtertype: 'checkedlist', width: 170 },
            { text: 'Tiêu đề', datafield: 'Title', width: 400, filtertype: 'textbox' },
            { text: 'Người viết', datafield: 'UserPost', width: 200, filtertype: 'checkedlist' },
            { text: 'Ngày viết', datafield: 'DatePost', width: 200, filtertype: 'textbox' },
            { text: 'Người cập nhật', datafield: 'UserUpdate', width: 200, filtertype: 'checkedlist' },
            { text: 'Ngày cập nhật', datafield: 'DateUpdate', width: 200, filtertype: 'textbox' },
            { text: 'Hiển thị', columntype: 'checkbox', filtertype: 'bool', datafield: 'Display' },

            ]
        });

        // create jqxWindow.
        $("#jqxwindow").jqxWindow({ theme: theme, resizable: false, autoOpen: false, width: 210, height: 180 });
        // create find and clear buttons.
        $("#findButton").jqxButton({ theme: theme, width: 70, });
        $("#clearButton").jqxButton({ theme: theme, width: 70, });

        // create dropdownlist.
        $("#dropdownlist").jqxDropDownList({
            theme: theme,
            autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 23,
            source: [
                'ID', 'Tiêu đề', 'Người viết', 'Người cập nhật'
            ]
        });

        $("#inputField").addClass('jqx-input-' + theme);
        // clear filters.
        $("#clearButton").click(function () {
            $("#grid_news").jqxGrid('clearfilters');
        });
        // find records that match a criteria.
        $("#findButton").click(function () {
            $("#grid_news").jqxGrid('clearfilters');
            var searchColumnIndex = $("#dropdownlist").jqxDropDownList('selectedIndex');
            var datafield = "";
            switch (searchColumnIndex) {
                case 0:
                    datafield = "ArticlesID";
                    break;
                case 1:
                    datafield = "Title";
                    break;
                case 2:
                    datafield = "UserPost";
                    break;
                case 3:
                    datafield = "UserUpdate";
                    break;
            }
            var searchText = $("#inputField").val();
            var filtergroup = new $.jqx.filter();
            var filter_or_operator = 1;
            var filtervalue = searchText;
            var filtercondition = 'contains';
            var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
            filtergroup.addfilter(filter_or_operator, filter);
            $("#grid_news").jqxGrid('addfilter', datafield, filtergroup);
            // apply the filters.
            $("#grid_news").jqxGrid('applyfilters');
        });
        $('#clearfilteringbutton').jqxButton({ height: 25, theme: theme, });
        $('#clearfilteringbutton').click(function () {
            $("#grid_news").jqxGrid('clearfilters');
        });
    });

</script>
<div class="cbread_crumb">
    <ul class="breadcrumb">
        <li><a class="glyphicons home" href="/Cpanel"><i></i>Control panel</a></li>
        <li class="divider"></li>
        <li class="lastli">Bài viết chung</li>
    </ul>
</div>
<div class="content-module-heading cf">
    <div class="separator"></div>
    <div class="heading-buttons">
        <h3 class="glyphicons notes"><i></i>Bài viết chung</h3>
        <div class="buttons pull-right">
		<a href="/Articles/InsertArticles" class="btn btn-primary btn-icon glyphicons circle_plus"><i></i> Thêm</a>
	</div>
        <div class="clearfix"></div>
    </div>
    <div class="separator"></div>

</div><!--content-module-heading -->

<div class="innerLR">
    <div id="grid_news"></div>
    <div id="jqxwindow">
        <div>
            Tìm kiếm
        </div>
        <div style="overflow: hidden;">
            <div>
                Từ khóa:
            </div>
            <div style='margin-top: 5px;'>
                <input id='inputField' type="text" class="jqx-input" style="width: 200px; height: 23px;" />
            </div>
            <div style="margin-top: 7px; clear: both;">
                Tìm theo:
            </div>
            <div style='margin-top: 5px;'>
                <div id='dropdownlist'>
                </div>
            </div>
            <div>
                <input type="button" style='margin-top: 15px; margin-left: 50px; float: left;' value="Tìm" id="findButton" />
                <input type="button" style='margin-left: 5px; margin-top: 15px; float: left;' value="Làm mới" id="clearButton" />
            </div>
        </div>
    </div>
</div>

